<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

	<head>
		<link rel="shortcut icon" type="image/x-icon" th:href="@{/img/list.png}">
		<meta charset="UTF-8">
		<title>商品列表</title>
		<link rel="stylesheet" type="text/css"  th:href="@{/css/goods-list.css}" />
		<link rel="stylesheet" type="text/css"  th:href="@{/css/swiper-4.3.5.min.css}"/>
		<link rel="stylesheet" type="text/css"  th:href="@{/css/reset.css}" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/head.css}"/>
		
	</head>

	<body>
	<div th:replace="head::topbar"></div>
			
		</div>
		<div class="container">
			<div class="goods-list">
				<a href="index.html">首页</a>
				<p class="pict"><img height="12" src="/img/xbt-4_03.png" /></p>
				<span class="fz">电器</span>
			</div>
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<a href="goods-details2.html"><img src="/img/7598c623e51be892450d4784e1837dea.jpg" /></a>
					</div>
					<div class="swiper-slide">
						<a href="goods-details2.html"><img src="/img/b5df6b7ef05c0d2cfdce67640fe6b6e9.jpg" /></a>
					</div>
				</div>
				<!-- Add Arrows -->
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
				<!-- Add Pagination -->
				<div class="swiper-pagination active"></div>
			</div>
			
			<div class="goodsArea">
				<div class="goodsStor">
					<span>分类：</span>
					<div class="category">
						<a href="#" class="categoryItem">全部</a>
						<a  th:href="@{${pc.ptypeId}}" class="categoryItem" th:each="pc:${productTypeChildList}" th:text="${pc.ptypeName}"></a>
					</div>
				</div>

				<div class="stors">
					<span>排序:</span>
					<div class="category">
						<a href="#" class="categoryItem">默认</a>
						<a href="#" class="categoryItem">价格
							<div class="icon">
								<img class="priceUp" src="/img/xbt-3_07.png" />
								<img class="priceDown" src="/img/xbt-3_08.png" />
							</div>
						</a>
						<a href="#" class="categoryItem">上架时间 <img style="vertical-align: middle;" width="8px" src="/img/l-1_02.png"/> </a>
					</div>
				</div>
			</div>
			<div class="content-category" th:each="pc:${productTypeChildList}">
				<div class="content-title">
					<p th:id="${pc.ptypeId}"><img class="fl" width="44" src="/img/tit-1.png">
						<span class="name fl"  th:text="${pc.ptypeName}"></span></p>
					<div class="clear"></div>
					<p class="desc">高性价比的货物，专心为你</p>
				</div>
				<ul class="itemList clearfix">
					<li class="item fl"  th:each="pd:${pc.products}">
						<div class="head">
							<a th:href="@{/product/goods-details(productId=${pd.getProductId()})}"><img class="tran5" width="256" th:src="@{${pd.getImgSrc()}}" /></a>
						</div>
						<div class="prdtTags">
							<span>新品</span>
						</div>
						<div class="name1">
							<span><a href="#" th:text="${pd.getProductName()}"></a></span>
						</div>
						<p class="price" th:text="'￥'+${pd.getProductPrice()}"></p>
						<div class="behoof">
							<div class="bar">

							</div>
							<p>用券立省400元</p>
						</div>
					</li>

				</ul>
			</div>

		</div>

		<script th:src="@{/js/jquery-3.3.1.min.js}"} type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/head-foot.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/swiper-4.3.5.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/jquery1.42.min.js}" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/jquery.SuperSlide.2.1.1.js}" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			var swiper = new Swiper('.swiper-container', {
				spaceBetween: 30,
				centeredSlides: true,
				autoplay: {
					delay: 2500,
					disableOnInteraction: false,
				},
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},

				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			});
		</script>
	</body>

</html>